<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false">商品添加</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">


			<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<view class=" " @click="classshow=true">
					<tn-select v-model="classshow" searchPlaceholder="关键词搜索" title="选择店内分类" valueName="id"
						:searchShow="true" labelName="title" mode="single" :list="classlist"
						@confirm="confirmclasss"></tn-select>
					<text class="tn-text-lg">{{classname}}</text>
					<text class="tn-icon-right"></text>
				</view>
			</view>

			<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<input placeholder="请输入商品名称" name="input" v-model="goods_name"
					placeholder-style="color:#AAAAAA"></input>
			</view>



			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
				<textarea maxlength="500" placeholder="请商品详情" v-model="detail"
					placeholder-style="color:#AAAAAA"></textarea>
			</view>



			<view
				class="tn-margin-left  tn-text-lg tn-margin-right tn-margin-top  boxitem  tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="boxl tn-flex  tn-flex-col-center">
					<view class="name">销售价</view>
					<view class="desc ft tn-margin-left-sm"></view>
				</view>
				<view class=" tn-flex  tn-flex-col-center">
					<view class=" tn-flex tn-bg-gray--light tn-flex-col-center"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;width: 200rpx;">
						<input placeholder="请输入" type="number" v-model="price"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="txt ftf tn-margin-left-sm">元</view>
				</view>
			</view>
			<view
				class="tn-margin-left  tn-text-lg tn-margin-right tn-margin-top  boxitem  tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="boxl tn-flex  tn-flex-col-center">
					<view class="name">市场价</view>
					<view class="desc ft tn-margin-left-sm"></view>
				</view>
				<view class=" tn-flex  tn-flex-col-center">
					<view class=" tn-flex tn-bg-gray--light tn-flex-col-center"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;width: 200rpx;">
						<input placeholder="请输入" type="number" v-model="old_price"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="txt ftf tn-margin-left-sm">元</view>
				</view>
			</view>
			<view
				class="tn-margin-left  tn-text-lg tn-margin-right tn-margin-top  boxitem  tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="boxl tn-flex  tn-flex-col-center">
					<view class="name">库存量</view>
					<view class="desc ft tn-margin-left-sm"></view>
				</view>
				<view class=" tn-flex  tn-flex-col-center">
					<view class=" tn-flex tn-bg-gray--light tn-flex-col-center"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;width: 200rpx;">
						<input placeholder="请输入" type="number" v-model="kucun"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="txt ftf tn-margin-left-sm">份</view>
				</view>
			</view>

			<view
				class=" tn-text-lg tn-margin-left stitle tn-margin-sm tn-flex tn-flex-row-between   tn-flex-col-center ">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="name  ">是否上架</view>
				</view>
				<view class="">
					<tn-switch activeColor="#007DFF" v-model="status"></tn-switch>
				</view>

			</view>
			<view
				class=" tn-text-lg tn-margin-left stitle tn-margin-sm tn-flex tn-flex-row-between   tn-flex-col-center ">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="name  ">是否推荐</view>
				</view>
				<view class="">
					<tn-switch activeColor="#007DFF" v-model="is_show"></tn-switch>
				</view>

			</view>




			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-image" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">商品图片</view>

				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空图片</text>
					<text class="tn-icon-delete"></text>
				</view>
			</view>


	<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
				
			
				<!-- 方式12 start-->
			<view class="tn-flex tn-margin-top-sm" v-for="(item, indexgift) in tupianlist" :key="indexgift">
			  <view class="tn-flex-1  tn-margin-xs tn-radius" >
			    <view style="position: relative;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			  
			      <view class=" tn-text-center" >
			       <image :src="item" style="height:150rpx;" mode="heightFix"></image>
			      </view>
				  <tn-badge @click="del(item,indexgift)"  backgroundColor="#ff0000" top="10px" right="10px"  fontColor="#FFFFFF" :absolute="true" >
				    <text>x</text>
				  </tn-badge>
			    </view>
			  </view>
			
			</view>
			  </tn-scroll-list>
		
		
		
			<view class="tn-margin-left tn-padding-top-xs" style="min-height: 120px;">
				<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" @on-uploaded="onUploaded" />

			</view>




			<view class='tn-tabbar-height'></view>


		</view>

		<view class='tn-tabbar-height'></view>
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="fabuba()">
				<tn-button :blockRepeatClick="true" :backgroundColor="configInfo.button" padding="40rpx 0" width="60%"
					shadow fontBold>
					<text class="tn-icon-edit tn-padding-right-xs "></text>
					<text class="">确 定 发 布</text>

				</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { render } from "vue"
	export default {
		name: 'TemplateCreate',
		mixins: [template_page_mixin],
		data() {
			return {
				upimages:[],
				tupianlist:[],
				okpiclist:[],
				price: '',
				old_price: '',
				kucun: 1000,
				is_show: true,
				status: true,
				classid: 0,
				classname: '选择店内分类',
				classshow: false,
				goods_name: '',
				classlist: [],
				id: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				quan_title: '',
				quan_id: 0,
				show: false,
				mode: 'date',
				showLunar: true,
				activeBgColor: '#01BEFF',
				activeColor: '#FFFFFF',
				rangeBgColor: '#E6E6E655',
				rangeColor: '#01BEFF',
				btnColor: '#01BEFF',
				lunarColor: '#AAAAAA',
				startText: '开始',
				endText: '结束',
				toolTips: '请选择日期',
				changeYear: true,
				changeMonth: true,
				result: '',
				//、		
				detail: '',
				images: '',
				address: '',
				lat: '',
				lng: '',
				times: '',
				//
				tagList: [],
				action: '',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
			}
		},
		onLoad(option) {
			let that = this
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$on('quan', loginBoxFlag => {
				that.quan_id = loginBoxFlag.id
				that.quan_title = loginBoxFlag.title
			});
			that.action = host + '/chat/user/up_img'
			if (option.id) {
				this.id = option.id			
			}
			this.info()
		},
		methods: {
			del(url,index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除图片吗?',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {							
						that.tupianlist.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirmclasss(e) {
				this.classname = e[0].label
				this.classid = e[0].value
			},
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/class',
					data: {}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						
						that.classlist = result.data.data;
						this.getfoods()
					}
				}
			},
			async getfoods() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/partner/goodsshow',
					data: {
						id:this.id
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {						
				
					that.tupianlist = result.data.data.images
					
					
						this.price=result.data.data.price
						this.old_price= result.data.data.old_price
						this.kucun= result.data.data.kucun
						this.is_show= result.data.data.is_show?true:false
						this.status= result.data.data.status?true:false
						this.classid=result.data.data.cate_id2
						this.classname=result.data.data.classname
						this.goods_name= result.data.data.goods_name
						this.detail= result.data.data.detail
						
					}
				}
			},
			
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			showCalendar() {
				this.show = true
			},


			onSortList() {

			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			fabuba() {
				this.$common.noMultipleClicks(this.fabu(), 1000);
			},
			// 图片
			onUploaded(list) {

				uni.showLoading({
					title: '发布中，请稍后',
					mask: true
				})
				
				console.log(list)
				if (list.length > 0) {	
					let imageList = list.map(i => i.response.data.file).join(',');
					this.upimages = imageList			
					this.send()
				} else {
					this.send()
				}
			},



			fabu() {
				if (this.classid == 0) {
					this.msg('请选择店内分类')
					return
				}

				if (this.goods_name == '') {
					this.msg('请输入商品名称')
					return
				}
				if (this.detail == '') {
					this.msg('请输入商品详情')
					return
				}

				if (this.price == '') {
					this.msg('请输入商品价格')
					return
				}

				if (this.kucun == '') {
					this.msg('请输入商品库存')
					return
				}
				uni.showLoading({
					title: '发布中，请稍后',
					mask: true
				})

				this.$refs.imageUpload.upload()
			},

			async send() {

	
				let that = this;
				
				if (this.upimages.length>0){
				let iamgesshuju= this.upimages.split(",");				
				this.okpiclist=this.tupianlist.concat(iamgesshuju);
				}else{
				this.okpiclist=this.tupianlist
				}
			
				if (this.okpiclist.length==0) {
					this.msg('请选择商品图片')
					return
				}
				let imageList = this.okpiclist.map(i => i).join(',');
				
				console.log(imageList)
				
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/partner/edit_goods',
					data: {
						price:that.price,
						id:that.id,
						old_price:that.old_price,
						kucun:that.kucun,
						is_show:that.is_show,
						status:that.status,
						class_id:that.classid,
						detail: that.detail,
						goods_name: that.goods_name,
						images: imageList					
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: result.data.msg,
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
									uni.$emit('shopok',true)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		bottom: 0;
		position: fixed;
		width: 100%;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>